<template>
  <el-select
    v-model="dataForm.skuId"
    filterable
    remote
    reserve-keyword
    placeholder="请输入关键词"
    :remote-method="searchSkuHandler"
    :loading="loading">
    <el-option
      v-for="item in skuList"
      :key="item.skuId"
      :label="item.skuName"
      :value="item.skuId">
    </el-option>
  </el-select>
</template>

<script>
import skuApi from '../../../../api/product/skuApi'

export default {
  props: ['skuId'],
  name: 'selectSkuByNameComponent',
  data () {
    return {
      skuList: [],

      skuInfoPage: {
        currentIndex: 1,
        size: 10
      },
      dataForm: {
        skuId: null
      },
      loading: false
    }
  },
  methods: {
    async searchSkuHandler (name) {
      this.loading = true

      let id = null;
      let skuName = null;

      if (/^[0-9]*$/.test(name)) {
        id = name;
      }else{
        skuName = name;
      }
      console.log("用户输入的sku信息是",name,"其类型是",typeof name,"是否为数字",/^[0-9]*$/.test(name))


      let p = await skuApi.list(this.skuInfoPage.currentIndex, this.skuInfoPage.size,id, skuName)
      this.skuList = p.data.page.list
      this.loading = false
    },
  },
  created () {
    this.searchSkuHandler()
  },
  watch: {
    'dataForm.skuId' (val) {
      this.$emit('update-sku-id', val)
    },
    skuId (val) {
      this.dataForm.skuId = val
    }
  }
}
</script>

<style scoped>

</style>
